<template>
  <section>
    <h2>Hello-modules</h2>
    <p>你好：{{$store.state.user_name}}</p>
    <fieldset>
      <legend>增加管理员</legend>
      <div>姓名：<input type="text" v-model="formData.name" /></div>
      <div>年龄：<input type="number" v-model.number="formData.age" /></div>
      <div>
        性别： 男<input
          type="radio"
          value="男"
          name="sex"
          v-model="formData.sex"
        />
        女<input type="radio" value="女" name="sex" v-model="formData.sex" />
      </div>
      <button @click="handleAdd">添加</button>
      <button @click="handleAddAll">添加所有</button>
    </fieldset>
    <h3>管理员列表</h3>
    <ol>
        <li v-for="item in $store.state.admin.list" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>用户列表</h3>
    <ol>
        <li v-for="item in $store.state.user.list" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>女生列表（顶层模块）</h3>
    <ol>
      <li v-for="item in $store.getters.girlList" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>女生列表（管理员模块）</h3>
    <ol>
      <li v-for="item in $store.getters['admin/girlList']" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>女生列表（用户模块）</h3>
    <ol>
      <li v-for="item in $store.getters['user/girlList']" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>所有人列表</h3>
    <ol>
      <li v-for="item in $store.getters['admin/getAll']" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>所有女生</h3>
    <ol>
      <li v-for="item in $store.getters['admin/getAllGirls']" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
  </section>
</template>

<script>
export default {
    data() {
        return {
            formData: {

            }
        }
    },
    methods: {
        handleAdd() {
            this.$store.commit("admin/add",{...this.formData});
        },
        handleAddAll() {
          this.$store.dispatch("admin/add",{...this.formData});
        }
    }
};
</script>

<style>
</style>